<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/detail.css">
  <link rel="stylesheet" href="../css/index.css">
  <style>
    .bx .logo{
      height: 76px;
      margin-bottom: 20px;
    }
    .bx .logo img{
      float: left;
    }
    .bx .logo ul li{
      float: left;
      line-height: 76px;
      margin-left: 75px;
      
    }
  </style>
</head>
<body>
  <div class="bx">
   
    <div class="logo"><a href="./index.html"><img src="../img/logo.jpg" ></a>
  
        
      <ul>
        <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=食品酒水" role="button">食品酒水</a></li>
        <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=童装玩具" role="button">童装玩具</a></li>
        <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=家装建材" role="button">家装建材</a></li>
        <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=奶粉尿裤" role="button">奶粉尿裤</a></li>
        <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=其他" role="button">其他产品</a></li>
        
      </ul>
     
      
  </div>

<div class="container"></div>
</div>
<script src="../tools//jquery.min.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/cookie.js"></script>
<script src="../js/ajax.js"></script>
<script>
  //获取 url 地址参数数值
  const urlObj = getUrlVal()
  //发送请求根据相应体数据动态生成
  //promise
  const p = pjQueryAjax('../server/goods_detail.php','post',{goods_id:urlObj.goods_id},'json');
  p.then((res)=>{
    console.log(res);
      //根据数据 动态生成
      let str =`
      <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">商品详细信息</h3>
          </div>
          <div class="panel-body">
            <div class="media">
              <div class="media-left">
                <a href="#">
                  <img class="media-object" src="${res.goods_small_logo}" alt="...">
                </a>
              </div>
              <div class="media-body">
                <h4 class="media-heading">${res.goods_name}</h4>
                <p>
                  <i class="glyphicon glyphicon-yen"></i>
                  <span>${res.goods_price}</span>
                </p>
                <div class="btn-group" role="group" aria-label="...">
                  <button type="button" class="btn btn-default">XL</button>
                  <button type="button" class="btn btn-default">L</button>
                  <button type="button" class="btn btn-default">M</button>
                  <button type="button" class="btn btn-default">S</button>
                  <button type="button" class="btn btn-default">XS</button>
                </div>
                <p>
                  <a href="javascript:;" class="btn btn-warning btn-lg" role="button">立即购买</a>
                  <a name="cart" href="javascript:;" class="btn btn-danger btn-lg" role="button">加入购物车</a>
                </p>
              </div>
            </div>
            <ul class="nav nav-tabs">
              <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
              <li role="presentation"><a href="#">商品参数信息</a></li>
              <li role="presentation"><a href="#">相关商品</a></li>
            </ul>
            <div>
              ${res.goods_introduce}
            </div>
          </div>
      
      `;
      // 将内容写入
      $('.container').html(str);

      //给购物车加点击事件
      $('[name ="cart"]').click(function(){
        //获取cookie数据 键值对字符串 === 对象
        const cookieObj = myGetCookie()
        console.log(cookieObj);
        // console.log(cookieObj.login);
        //执行判断
        //如果cookieObj.login是undefined 证明 没有登录
        if(cookieObj.login === undefined){
          //弹出确认框
          if(window.confirm('没登陆，跳转登录')){
            window.location.href=`./login.html?url=${window.location.href}`;
          }
        }else{
          //已经登录 先存储当前商品信息 在跳转购物车
          //获取localStorage 中 cart 购物车数据信息
          //如果没有创建 购物车 数据 结果是 null
          let cartArr = localStorage.getItem('cart');
          // console.log(cartArr);
          if(cartArr === null){
            //证明话没有购物车，创建购物车
            //创建一个数组
            const arr = [];
            //给对象添加数据信息
            //给买数量默认是1
            res.num = 1;
            //购买状态 默认是true 购买状态
            res.buy =  true;
            //新增商品写入数组的其实位置
            arr.unshift(res);
            //将数组信息存储在 localStorage中
            localStorage.setItem('cart',JSON.stringify(arr ));
          }else{
            //购物车已存在
            //将localStorage 中 存储的json字符串 还原
            cartArr = JSON.parse(cartArr);
            //先判断 购物车数组中是否有当前上去 的 goods_id
            let bool = cartArr.some(function(item){
              return item.goods_id === res.goods_id;
            });
            console.log(bool);
            if(bool){
              //证明 商品 已经存在 给 good_id 和 当前商品 good_id 相同的商品
              //num 购买数量 +1
              for(let i = 0; i<=cartArr.length-1;i++){
                if(res.goods_id === cartArr[i].goods_id){
                  cartArr[i].num++;
                  break;
                }
              }
            }else{
              //证明商品不存在
              //给当前商品添加属性
              res.num = 1;
              res.buy = true;
              //写入 数组的起始
              cartArr.unshift(res);
            }
            //重新设定 localStorage
            localStorage.setItem('cart',JSON.stringify(cartArr));
          }
          //商品添加完毕 跳转购物车
          window.location.href = './cart.html';
          
        }
      })

  })
  
  
 
</script>

</body>
</html>
